<template>
  <div style="width: 100%;height :100%" class="big_class">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据处理</el-breadcrumb-item>
        <el-breadcrumb-item>温度</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="btn">
          <el-button icon="iconfont icon-zhexiantu_o" circle @click="zhexiantu()"></el-button>
          <el-button icon="iconfont icon-tubiao-zhuzhuangtu" circle @click="zhuzhuangzhu()"></el-button>
          <el-button icon="iconfont icon-sandiantu" circle @click="sandiantu()"></el-button>
          <el-button icon="iconfont icon-tubiao-bingtu" circle @click="pingtu()"></el-button>
      </div>
      <keep-alive style="height: auto;">
          <component v-bind:is="chart">

          </component>
      </keep-alive>
  </div>
</template>

<script>
  import linetemperature from "./temperature_view/line_temperature.vue"
  import bartemperature from "./temperature_view/bar_temperature.vue"
  import scattertemperature from "./temperature_view/scatter_temperature.vue"
  import pietemperature from "./temperature_view/pie_temperature.vue"
  export default {
    data() {
      return{
        Type:"line",
      }
    },
    computed:{
        chart(){
          return this.Type + "temperature";
        }
    },
    components:{
      linetemperature,
      bartemperature,
      scattertemperature,
      pietemperature
    },
    methods:{
      zhexiantu(){
        this.Type = "line";
      },
      zhuzhuangzhu(){
        this.Type = "bar";
      },
      sandiantu(){
        this.Type = "scatter";
      },
      pingtu(){
        this.Type = "pie";
      }
    }
  }
</script>

<style scoped>
  .btn{
    background: -webkit-linear-gradient(to right, #fc67fa, #f4c4f3);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fc67fa, #f4c4f3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
</style>
